<template>
	<view class="pic-container">
		<up-collapse :value="value" :border="false">
			<up-collapse-item  v-for="item in picList" :title="item[0]" :titleStyle="titleStyle" :name="item[0]">
				<view class="img-container">
					<view v-for="(img, index) in item[1]" :key="img.fid" >
						<up-image v-if="getFileType(img.url) == 'image'" @click="previewImg(img.url)" :src="img.url" width="30vw" height="100" :lazy-load="true"></up-image>
						<view
							v-else-if="getFileType(img.url) === 'video'"
							@tap="onTapVideo(img.fid, img.url)"
							class="video-wrapper"
						>
							<video
								:id="img.fid"
								:src="img.url"
								:controls="false"
								:show-center-play-btn="false"
								:show-play-btn="false"
								@click.stop.prevent="() => {}"
								style="width: 30vw; height: 100px;"
							></video>
							<view class="play-icon">▶</view>
						</view>
					</view>
				</view>
			</up-collapse-item>
		</up-collapse>
		
		
		<up-modal @close="close" :show="show" :showConfirmButton="false" :showCancelButton="false" :closeOnClickOverlay="true">
			<video
				id="video"
				:src="videoUrl"
				controls
				muted
				style="width: 100vw; height: 200px;"
			></video>
		</up-modal>
  </view>
</template>

<script>
import { chatApi } from '@/apis/cloud/chat'
import { useUserStore } from '@/pinia-store/user'
import { mapStores } from 'pinia'
import dayjs from 'dayjs'
import { processImageUrl } from "@/utils/chat"


export default {
  name: "PreviewDoc",
  props: {

  },
  data () {
    return {
      url: '',
			videoUrl: '',
			show: false,
			userInfo: {},
			picList: [],
			picData: [],
			value: [],
			titleStyle: {
				fontSize: '20px',
				fontWeight: '700'
			}
    }
  },
	computed: {
		...mapStores(useUserStore),
	},
  onLoad (options) {
		this.groupId = options.groupId;
		this.userInfo = this.userStore.user;
		this.getPicMov();
  },
	methods: {
		onTapVideo(fid, url) {
			this.videoUrl = url;
			this.show = true;
			this.$nextTick(() => {
				const ctx = uni.createVideoContext('video', this)
				ctx.play()
			})
		},
		close() {
			const ctx = uni.createVideoContext('video', this)
			ctx.pause();
			this.show = false;
		},
		async getPicMov() {
			const params = {
				'data[token]': this.userInfo?.token,
				'data[bizId]': this.groupId,
				'data[chatType]': 'group',
				url: 'index.php/users/file/img_mov/list'
			}
			const msg = await chatApi(this.userInfo?.token, params);
			this.picData = msg.data.map(item => {
				if (!(/^https?:\/\//i.test(item.url))) {
					item.url = "https://chat.mfarmers.com:88/"+item.url
				}
				item.url = processImageUrl(item.url);
				return item
			})
			const pic = Object.groupBy(this.picData, item => dayjs(item.create_date).format('YYYY-MM'));
			this.picList = Object.entries(pic);
			this.value = this.picList.map(item => item[0])
		},
		async previewImg(url) {
			const cache = url.replace(/\/thumb_([^\/.]+\.(?:png|jpe?g|gif))/i, '/$1')
			const urls = this.picData.map(item => {
				item.url = item.url.replace(/\/thumb_([^\/.]+\.(?:png|jpe?g|gif))/i, '/$1')
				return item.url
			});
			uni.previewImage({
				urls: urls,
				current: cache
			})
		},
		getFileType(url) {
			if (!url) return 'unknown';
		
			const lower = url.toLowerCase();
		
			if (/\.(jpg|jpeg|png|gif|bmp|webp|svg)(\?|$)/.test(lower)) return 'image';
			if (/\.(mp4|mov|avi|mkv|webm|flv)(\?|$)/.test(lower)) return 'video';
		
			// 有些后端用 query 参数标识类型
			if (/format=(jpg|jpeg|png|gif|webp)/.test(lower)) return 'image';
			if (/type=(mp4|mov|webm)/.test(lower)) return 'video';
		
			return 'unknown';
		}
	}
}
</script>

<style scoped lang="scss">
page {
  overflow: hidden;
  width: 100vw;
}

.mouth-label {
	position: sticky;
	margin-bottom: 10px;
	background-color: #fff;
}
.img-container {
	display: flex;
	flex-wrap: wrap;
}
.video-wrapper {
  position: relative;
}
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 60rpx;
  padding: 10rpx 20rpx;
}
</style>
